<template>
	<view>
		<y-title hideBack rightIcon="ic_setting_white.png" rightIcon2="ic_bell_white.png" @right2="toRanking" @right="toSetting">
			<slot name="back">
				<view class="zy-row zy-btn-white-opacity-sm zy-ml-lg">
					<image class="zy-icon" mode="widthFix" :src="$getImageUrl('ic_eye_white.png')"></image>
					<view class="zy-text-white-sm zy-ml-sm" @click="toVisit">新访客</view>
				</view>
			</slot>
		</y-title>

		<view class="zy-page-padding">
			<!-- 用户信息:头像，昵称，世界号 -->
			<view class="zy-row zy-mt-50" @click="toUserInfo">
				<image :src="user.headPicUrl"
					style="width: 160rpx; height: 160rpx; border-radius: 50%; border: 2rpx solid #F5F5F5"></image>
				<view class="zy-column-center zy-flex zy-ml-lg">
					<text class="zy-text-white-lg">{{user.nick}}</text>
					<text class="zy-text-whitegrey zy-mt">MoMi号：{{user.userCode}}</text>
				</view>
				<y-arrow-right></y-arrow-right>
			</view>
			<!-- vip -->
			 <view class="zy-row zy-ph-lg vip-bg" @click="toVip">
				<image class="zy-icon" mode="widthFix" :src="$getImageUrl('ic_vip_yellow.png')"></image>
				<view class=" zy-flex zy-text-yellow-light-lg zy-ml">{{vip.text}}</view>
				<y-arrow-right size='10'></y-arrow-right>
			</view>
			<!-- item:人气认证,我的游历墙 -->
			<view>
				<cell-item label="人气认证" :icon="$getImageUrl('ic_earth_white.png')" @click="toAuth"></cell-item>
				<cell-item label="我的游历墙" :icon="$getImageUrl('ic_earth_white.png')" @click="toDynamicPerson"></cell-item>
			</view>
		</view>
		
		<quick-message ref="message"></quick-message>
		<popup-vip ref="vip"></popup-vip>
	</view>
</template>

<script lang="ts" setup>
	import RouteUtil from '@/common/RouteUtil';
	import CacheUtil from '@/common/CacheUtil';
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app";
	const user = ref({})
	const vip = ref({
		text: '开通会员',
		btn: '立即开通' 
	})
	
	onShow(()=>{
		requestUser()
	})
	
	const toRanking = ()=>{
		RouteUtil.toRanking()
	}
	
	const toVisit = ()=>{
		RouteUtil.toVisit()
	}
	
	const toSetting = ()=>{
		RouteUtil.toSetting()
	}
	
	const toUserInfo = ()=>{
		RouteUtil.toUserInfo(user.value?.txCode)
	}
	
	const toVip = ()=>{
		RouteUtil.toVip()
	}
	
	const toAuth = ()=>{
		RouteUtil.toAuth()
	}
	
	const toDynamicPerson = ()=>{
		RouteUtil.toDynamicPerson(2, CacheUtil.getUserId())
	}
	
	const toAgreement = ()=>{
		RouteUtil.toAgreement()
	}
	
	const toPrivacy = ()=>{
		RouteUtil.toPrivacy()
	}
	
	const requestUser = ()=> {
		uni.$http.getUser().then((res:any) => {
			user.value = res.data;
			if (0 == res.data.vip) {
				vip.value.text = '已开通会员 ' + res.data.vipTime + '到期';
				vip.value.btn = '立即续费';
			} else {
				vip.value.text = '开通会员';
				vip.value.btn = '立即开通';
			}
		})
	}
</script>


<style lang="scss" scoped>
	.vip-bg {
		height: 87rpx;
		background: linear-gradient(105deg, #211F20 0%, #313131 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #707070;

		margin-top: 80rpx;
	}
</style>
